<template>
  <div class="fzxq">
    <header class="bg-blue">
      <p>应付</p>
      <div>￥8000.00</div>
    </header>
    <div class="zdzt">
      账单状态<span class="fr">{{'已付款'}}</span>
    </div>
    <div class="month-zdzt">
      {{'2017-10-20'}} 账单<span class="fr fs-14 blue">{{'已支付'}}</span>
    </div>
    <section class="address">{{'1单元1楼101'}}</section>
    <div class="money">￥{{'4800.00'}}</div>
    <div class="yajing">押金<span class="fr">{{'0.00'}}</span></div>
    <div class="wyf">物业费<span class="fr">{{'0.00'}}</span></div>
    <div class="pay-btn" @click.stop="pay">立即支付</div>
    <payment v-model="paymentShow" :payInfo="payInfo"></payment>
  </div>
</template>
<script>
  import Payment from '@/components/Payment'
  export default {
    name: 'fang-zhu-xiang-qing',
    components: {
      Payment
    },
    data () {
      return {
        paymentShow: false,
        payInfo: '',
        serviceId: ''

      }
    },
    created () {
      this.serviceId = this.$route.query.serviceId
    },
    methods: {
      pay () {
        console.log(this.serviceId)
        this.paymentShow = true
        this.payInfo = {type: 'order', serviceId: this.serviceId}
      }
    }
  }
</script>
<style lang="less">
  .fzxq {
    font-size: 15px;
    >div {
      padding: 0 18px;
      height: 44px;
      line-height:44px;
    }
    >header {
      padding: 0 18px;
    }
    .zdzt {
      border-bottom: 6px solid #F3F3F3;
      .fr {
        color: #4791F4;
      }
    }
    .bg-blue{
      height: 75px;
      background-color: #4790F4;
      color: white;
      p {
        line-height: 36px;
        height: 26px;
      }
      div {
        font-size: 25px;
      }
    }
    .address {
      font-size: 14px;
      color: #656565;
    }
    .blue {
      color: #ff9600;
    }
    .money {
      text-align: right;
      color: #ff3c00;
    }
    .wyf,.yajing, .money {
      border-bottom: 1px solid #F3F3F3;
    }
    .fr {
      float: right;
    }
    .fs-14 {
      font-size: 14px;
    }
    .pay-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100vw;
      background-color: #ff9600;
      font-size: 17px;
      text-align: center;
      color: white;
      padding: 0;
    }
  }
</style>
